<?php ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>项目详情</title>
    <script type="text/javascript">
        (function () { var phoneWidth = parseInt(window.screen.width), phoneScale = phoneWidth / 750, ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { document.write('<meta name="viewport" content="width=750, minimum-scale = ' + phoneScale + ", maximum-scale = " + phoneScale + ', target-densitydpi=device-dpi"/>') } else { document.write('<meta name="viewport" content="width=750, target-densitydpi=device-dpi"/>') } } else { document.write('<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"/>') }; })();
    </script>
    <link rel="stylesheet" type="text/css" href="assets/swiper/dist/css/swiper.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="assets/weui/lib/weui.js"></script>
    <script type="text/javascript" src="assets/swiper/dist/js/swiper.min.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
        }

        .p-text {
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.6);
            font-size: 28px;
            padding: 15px;
            position: absolute;
            right: 20px;
            bottom: 18px;
            border-radius: 30px;
            padding-left: 30px;
            padding-right: 30px;
        }

        .p-text-title {
            font-size: 28px;
            position: absolute;
            left: 50px;
            bottom: 38px;
            color: #ffffff
        }

        .list-item {
            position: relative;
            margin-bottom: 30px;
            padding-left: 25px;
        }

        .list-item>img {
            position: absolute;
        }

        .list-item>span {
            font-size: 28px;
        }

        .list-item>.label {
            color: #333333;
            margin-left: 45px;
        }

        .tel-phone {
            color: #2EB6ED;
            font-size: 28px;
        }

        .list-item>.label-1 {
            color: #999999;
            font: 24px;
        }

        .list {
            position: relative;
            margin-bottom: 65px;
        }

        .phone-icon {
            position: absolute;
            top: 120px;
            right: 22px;
            width: 116px;
        }

        .project-title {
            font-size: 28px;
            color: #333333;
            font-weight: bold;
            padding-left: 70px;
        }

        .project-desc {
            font-size: 24px;
            color: #999999;
            padding: 30px;
            padding-top: 20px;
            padding-left: 70px;
            line-height: 45px;
            overflow: hidden;
            height: 200px;
            margin-bottom: 15px;
           
        }

        .ext-btn {
            font-size: 24px;
            color: #999999;
            width: 120px;
            border: 1px solid #999999;
            height: 45px;
            line-height: 45px;
            border-radius: 8px;
            position: absolute;
            right: 50px;

        }
        .btn-bottom{
            position: fixed;
            bottom: 0px;
            width: 100%;
        }
        .btn-item{
            width: 50%;
            float: left;
            padding-bottom: 15px;
            background-color: #ffffff;
            padding-top: 15px;
          
        }
        .btn-b{
            font-size: 28px;
            text-align: center;
            height: 78px;
            color: #ffffff;
            width: 332px;
            line-height: 78px;
            border-radius: 10px;
           


           
           
        }
        .btn-submit{
            background-color: #ffa019;
           margin-left: 34px;
        }
        .btn-location{
            background-color: #2eb6ed;
            margin-left: 9px;
        }
    </style>
    <script>
        var projects = [
            {
                name: "",
                images: [
                    ''
                ]
            }
        ]
    </script>
</head>

<body>
    <div class="app">
        <div style="position: relative;">
            <img src="assets/bccj/1.jpg" style="width:100%">
            <div class="p-text">共10张</div>
            <div class="p-text-title">金科中建·集美阳光</div>
        </div>
        <div class="list">
            <div class="list-item" style="margin-top:35px;">
                <img src="assets/images/location.png" style="top:3px" />
                <span class="label">重庆·华岩国际新城（轻轨5号线旁）</span>
            </div>
            <div class="list-item">
                <img src="assets/images/phone.png" style="top:5px" />
                <span class="label">顾问热线：<a class="tel-phone" href="tel:028-88889999">028-88889999</a></span>
            </div>
            <div class="list-item">
                <span class="label label-1">面积段：</span>
                <span>10000m</span>
            </div>
            <div class="list-item">
                <span class="label label-1">容积率：</span>
                <span>4.00</span>
            </div>
            <div class="list-item">
                <span class="label label-1">绿化率：</span>
                <span>40%</span>
            </div>
            <div class="phone-icon">
                <a href="tel:028-88889999">
                    <img src="assets/images/phone-icon.png" />
                </a>
            </div>
        </div>
        <div style="position: relative;margin-bottom: 50px;">
            <div class="project-title">项目介绍</div>
            <div class="project-desc">
                本项目是由金科集团协同世界500强中建三局联合开发，首先，我将为您简单介绍一下我们金科品牌：
                1，金科，1998年5月21日成立于重庆，并于2011年8月23日在深交所上市（股票代码：000656），“中国企业500强”、
                “中国地产品牌价值10强”。2017年金科股份的品牌价值148.08亿，客户满意度连续五年超90％。金科土地储备面积超2000万方。目前，全国金科业主近百万家庭。
                2，公司总资产约1200亿元，年营收总额466亿元，拥有员工1.2万人，业务遍布中国京津冀经济圈、长三角经济圈、珠三角经济圈和长江经济带的52个城市（北京，重庆，成都，昆明，西安，长沙，天津，石家庄，贵阳，武汉，苏州，青岛，无锡，济南等），累计开发140多个项目，除房地产产业外，同时还有产业综合运营、社区综合服务、酒店园林和门窗装饰等多元业务，具备强大的综合实力。2016年纳税金额超40亿元。
                3，当前，公司积极推动产品创新，模式创新，从“地产开发商”转型升级为“美好生活服务商”，以“地产+服务”连接用户，打造优质生活方式，从人居需求出发，积极践行“成长更好，便利更好，健康更好，邻里更好，居家更好”。
                4，而重庆作为金科总部所在城市，先后在蔡家、巴南、龙兴、西永、礼嘉、大渡口等多板块获取超过10宗土地，充分体现了金科对深耕主城的决心和对重庆市场的信心。并且，金科打造的项目往往都出精品，代表项目有金科中华坊、金科天湖美镇、金科天籁城、金科云湖天都、金科阳光小镇等等。同时，金科物业约96%的业主满意度，也践行了“金科美好你的生活”的品牌理念，相信您选择金科，一定可以安心、放心、省心。
            </div>
            <div class="ext-btn" data-type="down">
                <div style="position: relative;">
                    <span style="margin-left:30px;">展开</span>
                    <img style="position: absolute;top:20px;right: 20px;" src="assets/images/down.png">
                </div>

            </div>
        </div>
        <div>
            <div class="project-title">户型图</div>
        </div>
        <div style="height:170px;clear: both;"></div>
       
    </div>
    <div class="btn-bottom">
            <div class="btn-item">
                <div class="btn-b btn-submit">关注项目</div>
            </div>
            <div class="btn-item">
                <div class="btn-b btn-location">一键导航</div>
            </div>
        </div>
    <script>
        $(function(){
            $(".ext-btn").click(function(){
                var type = $(this).attr("data-type");
                if(type == 'down'){
                    $(this).find("span").html("收起");
                    $(this).find("img").attr("src","assets/images/up.png");
                    $(this).attr("data-type","up");
                    $(".project-desc").css("height","auto").css("font-size","24px")
                }else{
                    $(this).find("span").html("展开");
                    $(this).find("img").attr("src","assets/images/down.png");
                    $(this).attr("data-type","down");
                    $(".project-desc").css("height","200px").css("font-size","24px")
                }
            });
        });
    
    </script>
</body>

</html>